<template>
    <div>
      <!-- 面包屑导航区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>学习管理</el-breadcrumb-item>
        <el-breadcrumb-item>课程列表</el-breadcrumb-item>
      </el-breadcrumb>
  
      <!-- 卡片视图区域 -->
      <el-card>
        <!-- 搜索与添加区域 -->
        <el-row :gutter="20">
          <div class="mt-4">
    <el-input
    v-model="queryInfo.query"
      placeholder="输入课程资料关键字"
      class="input-with-select"
    >
      <template #prepend>
        <el-select v-model="queryInfo.capacity" placeholder="Select" style="width: 115px">
            <el-option label="Select" :value="0" />
          <el-option label="学号" :value="1" />
          
          <el-option label="课程号" :value="2" />
        
        </el-select>
      </template>
      <template #append>
        <el-button  @click="getStudyDateList()"><el-icon><Search /></el-icon></el-button>
      </template>
    </el-input>
  </div>
          
        </el-row>
  
        <!-- 课程资料列表区域 -->
        <el-table :data="studyDate" style="width: 100%" max-height="250" border>
           <!-- <el-table-column fixed prop="date" label="Date" width="150" /> -->
           <el-table-column type="index" label="#" width="60" />
           <el-table-column prop="sno" label="学号" width="120" />
          <el-table-column prop="cno" label="课程号" width="120" />
          <el-table-column prop="tno" label="教师编号" width="120" />
          <el-table-column prop="study_time" label="学习时长" width="120" />
          <el-table-column prop="rate" label="学习次数" width="120" />
          <el-table-column prop="result" label="学习成绩" width="180" >
          <template v-slot:default="scope">
             <span v-if="scope.row.status === 0">暂未结课  没有成绩</span>
             <span v-else>{{scope.row.result}}</span>
              <!-- 如果返回的不是数字类型的 就不用加冒号  active-value="1" 直接写  如果是数字类型的 就需要在前面加冒号-->
            </template>
            </el-table-column>
          
          <el-table-column label="是否结课" width="120">
         
         <template v-slot:default="scope">
              <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" size="large"  width="60" @change="CourseDateStateChanged(scope.row)"/>
              <!-- 如果返回的不是数字类型的 就不用加冒号  active-value="1" 直接写  如果是数字类型的 就需要在前面加冒号-->
            </template>
          </el-table-column>
          <el-table-column label="操作" width="260px">
            <template v-slot:default="scope">
              <!-- 删除按钮 -->
              <el-button type="danger"  size="default" @click="deleteConent(scope.row.id)"><el-icon><Delete /></el-icon></el-button>
              <!-- 上传新的资料 -->
              
              <el-tooltip effect="dark" content="打分" placement="top" :enterable="false">
                <el-button type="warning" size="default" @click="openUploadContent(scope.row)"><el-icon><Operation /></el-icon></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 分页区域 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-card>
  
    

       <!-- 更改成绩 -->
       <el-dialog title="更改成绩" v-model="uploadDialogVisible"  width="50%" @close="addDialogClosed" :visible.sync="uploadDialogVisible" >
        <el-form :model="addForm"  ref="addFormref" label-width="70px">
          <el-form-item label="课程号" prop="cno">
            <span>{{addForm.cno}}</span>
          </el-form-item>
          <el-form-item label="学号" prop="sno">
            <span>{{addForm.sno}}</span>
          </el-form-item>
          <el-form-item label="教师编号" prop="tno">
            <span>{{addForm.tno}}</span>
          </el-form-item>
          <el-form-item label="学习时长" prop="study_time">
            <span>{{addForm.study_time}}</span>
          </el-form-item>
          <el-form-item label="学习进度" prop="rate">
            <span>{{addForm.rate}}</span>
          </el-form-item>
          <el-form-item label="分数" prop="result">
            <el-input v-model="addForm.result"></el-input>
          </el-form-item>
          
        <el-form-item label="状态" width="80" prop="status">
          <span v-if="addForm.status == 1">结课</span>
          <span v-else>正在学习</span>
          </el-form-item>
      </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="uploadDialogVisible =false">取 消</el-button>
          <el-button type="primary" @click="uploadContent">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        // 获取课程列表的参数对象
        queryInfo: {
          query: '',
          // 当前的页数
          pagenum: 1,
          // 当前每页显示多少条数据
          pagesize: 10,
          //选择是课程的类型
          capacity:0
        },
        uploadDialogVisible:false,
        studyDate: [],
        total:0,
        // 控制添加用户对话框的显示与隐藏
        uploadDialogVisible: false,
       
        // 添加课程数据的表单数据
        addForm: {
          cno: '',
          sno: 0,
          study_time:0,
          rate:0,
          result:0
      
        },
      
        
      }
    },
    created() {
      this.getStudyDateList()
    },
    methods: {
      async getStudyDateList() {
        console.log(typeof (this.queryInfo.capacity))
        switch(this.queryInfo.capacity){
            case 0:
                const { data: res0 } = await this.$http.post('studyRecordList',this.queryInfo)
                if (res0 === null) {
                    return this.$message.error('获取课程数据列表失败！')
                }
                this.studyDate = res0
                break
            case 1:
                console.log("ss")
                const { data: res1 } = await this.$http.post('studyRecordListSno',this.queryInfo)
                if (res1 === null) {
                    return this.$message.error('获取课程数据列表失败！')
                }
                this.studyDate = res1
                 break
            case 2:
                const { data: res2 } = await this.$http.post('studyRecordListCourse',this.queryInfo)
                    if (res2 === null) {
                        return this.$message.error('获取课程数据列表失败！')
                    }
                    this.studyDate = res2
                break
        }
      },
      // 监听 pagesize 改变的事件
      handleSizeChange(newSize) {
        // console.log(newSize)
        this.queryInfo.pagesize = newSize
        this.getStudyInformationList()
      },
      // 监听 页码值 改变的事件
      handleCurrentChange(newPage) {
        console.log(newPage)
        this.queryInfo.pagenum = newPage
        this.getStudyInformationList()
      },
      // 监听 switch 开关状态的改变
      async CourseDateStateChanged(studyDate) {
        console.log(studyDate.id)
       
        
        const { data: res } = await this.$http.put(
          `studyDateStatus/${studyDate.id}`
        )
        console.log(res)
        if (res !== 200) {
          return this.$message.error('更新资料状态失败！')
        }
        this.$message.success('更新资料状态成功！请注意给学生分数')
      },
      addDialogClosed() {
        this.addForm=[]
        this.$refs.addFormref.resetFields()
      },
      openUploadContent(row){
      //  console.log(typeof cno)//string 
      //  console.log(typeof sno)//number
      this.uploadDialogVisible = true
      this.addForm = row
      },
    
       deleteConent(id){
        if(confirm("你确认删除")){
         alert("暂未开发")
        }
      },
     
       async uploadContent(){//确定修改
    
        const {data:res} = await this.$http.post('/updateScore',this.addForm)
        
        // for (let index = 0; index < this.studyDate.length; index++) {
        //  if(this.addForm.sno === this.studyDate[index].sno){
        //   this.studyDate[index].result = this.addForm.result
        //  }
          
        this.getStudyDateList()
        console.log(res)
        if(res === 200){
          this.uploadDialogVisible = false
          return this.$message.success("成功");
        }else{
          return this.$message.error("error");
        }
     
       
        }
       
    }
  }

  </script>
  
  <style lang="less" scoped>
  </style>
  